<template>
  <div class="app-container">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="任务" name="Task">
        <Task
          :projectId="projectId"
          v-if="projectId && activeName == 'Task'"
        ></Task>
      </el-tab-pane>
      <el-tab-pane label="进度" name="Plan">
        <Plan
          :projectId="projectId"
          v-if="projectId && activeName == 'Plan'"
        ></Plan>
      </el-tab-pane>
      <el-tab-pane label="资料" name="Information">
        <Information
          :projectId="projectId"
          v-if="projectId && activeName == 'Information'"
        ></Information>
      </el-tab-pane>
      <el-tab-pane label="成果" name="Result">
        <Result
          :projectId="projectId"
          v-if="projectId && activeName == 'Result'"
        ></Result>
      </el-tab-pane>
      <el-tab-pane label="统计" name="Statistics">
        <Statistics
          :projectId="projectId"
          v-if="projectId && activeName == 'Statistics'"
        ></Statistics>
      </el-tab-pane>
      <el-tab-pane label="参与成员" name="Members">
        <Members
          :projectId="projectId"
          v-if="projectId && activeName == 'Members'"
        ></Members>
      </el-tab-pane>
      <el-tab-pane label="通知公告" name="Notice">
        <Notice
          :projectId="projectId"
          v-if="projectId && activeName == 'Notice'"
        ></Notice>
      </el-tab-pane>
      <el-tab-pane label="答疑解惑" name="Problems">
        <Problems
          :projectId="projectId"
          v-if="projectId && activeName == 'Problems'"
        ></Problems>
      </el-tab-pane>
      <el-tab-pane label="审核结果" name="Audit">
        <Audit
          :projectId="projectId"
          v-if="projectId && activeName == 'Audit'"
        ></Audit>
      </el-tab-pane>
      <el-tab-pane label="图谱" name="Charts">
        <Charts
          :projectId="projectId"
          v-if="projectId && activeName == 'Charts'"
        ></Charts>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup >
import { ref } from "vue";
import Task from "./task.vue";
import Information from "./information.vue";
import Result from "./result.vue";
import Audit from "./audit.vue";
import Plan from "./plan.vue";
import Notice from "./notice.vue";
import Problems from "./problems.vue";
import Members from "./members.vue";
import Charts from "./charts.vue";
import Statistics from "@/views/home/components/statistics.vue";
const route = useRoute();
const router = useRouter();

const activeName = ref("Task");
const projectId = ref("");
function handleClick() {}
// onMounted(() => {
//   projectId.value = route.query.id;
// });
watch(
  () => route,
  (newRoute, oldRoute) => {
    if (newRoute.query.id) {
      projectId.value = route.query.id;
    }
  },
  { deep: true, immediate: true }
);
</script>